<template>
    <div class="taskStatistics">
        <div class="contnetTopCardStyle">总任务数：{{ taskNumber }}</div>
        <div class="contentCardStyle">
            <div class="contentTop">
                <pieCard :id="`ts1`" class="pieCard" ref="decryptPie" title="解密情况" :optData="decryptPieData">
                </pieCard>
                <pieCard :id="`ts2`" class="pieCard" ref="decryptTypePie" title="解密类型分布" :optData="decryptPieData">
                </pieCard>
            </div>
            <div class="decryptionSituation">
                <linearCard :id="`decryptionSituation`" class="linearCard" ref="decryptionSituationLinear" title="解密结果统计"
                    :xAxisData="decryptionSituationXAxisData" :crackedData="crackedData" :unbreakableData="unbreakableData"
                    :cancellationData="cancellationData" :hashData="hashData">
                </linearCard>
            </div>
        </div>
    </div>
</template>

<script>
import pieCard from './components/pieCard.vue';
import linearCard from './components/linearCard.vue';

export default {
    components: {
        pieCard,
        linearCard,
    },
    data() {
        return {
            taskNumber: 123,
            decryptPieData: [
                { value: 8, name: '等待开始', itemStyle: { color: '#ADE9FF' } },
                { value: 12, name: '正在运行', itemStyle: { color: '#79C2FC' } },
                { value: 35, name: '任务停止', itemStyle: { color: '#0086F3' } },
                { value: 25, name: '暂停', itemStyle: { color: '#0037A7' } },
                { value: 25, name: '任务完成', itemStyle: { color: '#51C8C5' } },
                { value: 20, name: '故障', itemStyle: { color: '#3494BA' } },
            ],
            decryptTypePieData: [
                { value: 8, name: 'MD5', itemStyle: { color: '#ADE9FF' } },
                { value: 12, name: 'MD4', itemStyle: { color: '#79C2FC' } },
                { value: 35, name: 'SHA1', itemStyle: { color: '#0086F3' } },
                { value: 25, name: 'SHA256', itemStyle: { color: '#0037A7' } },
                { value: 25, name: 'LM', itemStyle: { color: '#51C8C5' } },
                { value: 20, name: 'NTLM', itemStyle: { color: '#3494BA' } },
            ],
            decryptionSituationXAxisData: ['MD4', 'MD5', 'SHA1', 'SHA256', 'LM', 'NTLM'],
            crackedData: [400, 400, 300, 300, 300, 400, 400, 400, 300],
            unbreakableData: [400, 400, 300, 300, 300, 400, 400, 400, 300],
            cancellationData: [400, 400, 300, 300, 300, 400, 400, 400, 300],
            hashData: [400, 400, 300, 300, 300, 400, 400, 400, 300],
        }
    },
    methods: {

    },
    mounted() {
        // 子组件事件运行
        this.$refs.decryptPie.fnDrawPie()
        this.$refs.decryptTypePie.fnDrawPie()
        this.$refs.decryptionSituationLinear.fnDrawPie()


    },
}
</script>
<style lang="less" scoped>
.taskStatistics {
    .topCard {
        width: 1607px;
        height: 67px;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(204, 204, 204, 0.4);
        box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.349019607843137);
        color: #999999;
        font-weight: 650;
        font-size: 18px;
        align-items: center;
        display: flex;
        padding-left: 24px;
    }

    .contentTop {
        display: flex;

        .pieCard {
            flex: 1;
            background-color: rgba(255, 255, 255, 1);
            border-radius: 5px;
            -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.349019607843137);
            box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.349019607843137);
            font-weight: 400;
            font-style: normal;
            color: #000000;
            margin: 10px;
            padding-bottom: 20px;
        }
    }

    .decryptionSituation {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 5px;
        -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.349019607843137);
        box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.349019607843137);
        font-weight: 400;
        font-style: normal;
        color: #000000;
        margin: 10px;
        padding-bottom: 20px;
    }
}
</style>